<template>

  <div class="zhanshi">

    <!-- top -->
    <div class="top">
      <!-- table -->
      <div class="table">
        <el-table
          :header-cell-style="{background:'#f0f2f5',color:'black'}"
          class="table"
          :data="table_list"
          style="width: 100%"
          fit
          highlight-current-row
          height="100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
          />
          <el-table-column
            align="left"
            prop="userId"
            label="学生编号"
            width="100"
          />
          <el-table-column
            prop="userRealName"
            label="姓名"
          />
          <el-table-column
            prop="sex"
            label="性别"
          />
          <el-table-column
            prop="bmi"
            label="BMI"
          />
          <el-table-column
            prop="hRavg"
            label="平均心率"
          />
          <el-table-column
            prop="trimp"
            label="有效运动负荷"
          />
          <el-table-column
            prop="activeTime"
            label="有效运动负荷时间"
          />
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">

              <div class="table-btn">
                <div
                  class="btn-item"
                  @click="go_info(scope.row)"
                >详情</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        class="pagin"
        background
        :current-page="currentPage"
        :page-size="this.size"
        :total="this.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
import HisRecords from '@/api/hisRecords.js'
export default {
  name: 'XueSheng',
  props: {
    record_id: {
      type: [String, Number]
    }
  },
  data() {
    return {
      table_list: [
        {
          name: '张一鸣',
          number: '123456',
          time: '2020-0608--52',
          belong: 'xie协和医院组'
        }
      ],
      currentPage: 1,
      size: 5,
      total: 100,
      record: ''
    }
  },
  watch: {
    'record_id': function() {
      console.log('chagne')
      this.StudentDetails()
    }
  },
  mounted() {
    // console.log(this.$route.params.id)
    this.record = this.$route.params.id
    this.StudentDetails()
  },
  methods: {
    async StudentDetails() {
      const data = {
        RecordID: this.record,
        page: this.currentPage,
        size: this.size
      }
      const result = await HisRecords.StudentDetails(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.table_list = result.result.result
        this.total = result.result.total
        this.currentPage = result.result.page
      }
    },

    // 页面page改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.StudentDetails()
    },
    handleSelectionChange(val) {
      console.log(val)
      // alert(`你选择了${val}`)
    }

  }
}
</script>

<style lang="scss" scoped>
.zhanshi{
  // padding: 30rpx;
  .top{
    overflow: hidden;
    padding: 25px;

    .table{
      height: 650px;
    }
  }
}
.btn-item{
  cursor: pointer;
  color: #46a6ff;
  font-size: 14px;
  padding: 0 10px;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #42b983;
    border-color: #42b983;
}
::v-deep .el-checkbox__inner:hover,::v-deep .el-checkbox__inner:focus{
  border-color: #42b983;
  outline-color:#42b983;
}
.name_word{
  color: #46a6ff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #41cb89;   // 进行修改背景和字体
  color: #fff;
}
.pagin{
  margin-top: 25px;
  text-align: right;
}
@media screen and (max-width:1400px){
  .zhanshi .top{
    padding: 0 30px;
  }
  .zhanshi .top .table{
    height: 220px;
  }
}
</style>
